import React from 'react';
// 在函数组件中, 操作redux数据
// 与类组件相比: 定义仓库的方式和实现仓库全局化这都不变, 是一样的, 只不过在组件中
// 操作redux 的方式变了

// 类组件: 借助connnect 这个高阶组件函数, 将redux中的state 数据和操作数据的方法映射当前组件的props 属性上
// 函数组件: 借助两个hooks useSelector 和 useDispatch
// 注意: 在类组件中react-redux 提供了connnect 这个高阶组件函数操作redux 数据
// 注意: 在函数组件中, react-redux 提供了 两个hook useSelector 和 useDispatch


import { useSelector, useDispatch } from 'react-redux'
// 导入shopactions
import { addCountAction, addpushAction } from '../../../store-modules/actions/shopActions'
// 导入useractions
import { addAgeAction, setschoollistActionAsync } from '../../../store-modules/actions/userActions'
// 导入useEffect
import { useEffect } from 'react';
const Father = () => {
    // 获取仓库redux 定义的state数据;
    const { shopReducer, userReducer } = useSelector(state => state)
    //console.log('state', state);
    // 获取dispath 方法
    const dispatch = useDispatch();

    // 初始化调用派发学校列表异步任务,请求学校列表
    useEffect(() => {
        dispatch(setschoollistActionAsync())
    }, [])
    return (
        <div>
            {/*shopReducer中的数据  */}
            <p onClick={() => {
                // 派发任务, 修改count
                dispatch(addCountAction(5))
            }}>count:{shopReducer.count}</p>
            <p>
                <button onClick={() => {
                    dispatch(addpushAction({
                        id: shopReducer.shopArr[shopReducer.shopArr.length - 1].id + 1,
                        proname: '宏基'
                    }))
                }}>添加商品</button>
            </p>
            <ul>
                {
                    shopReducer.shopArr.map(item => {
                        return <li key={item.id}>{item.proname}</li>
                    })
                }
            </ul>
            <hr />
            {/* userReducer中的数据 */}
            <p onClick={() => {
                dispatch(addAgeAction(2))
            }}>{userReducer.userinfo.name}--{userReducer.userinfo.age}</p>
            <ul>
                {
                    userReducer.schoollist.map((item, index) => {
                        return <li key={index}>{item.school_name}</li>
                    })
                }
            </ul>
        </div>
    );
}

export default Father;
